<template>
  <div id="scrollContent">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.title"
        :width="item.width?item.width:defaultWidth">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        defaultWidth: 180
      }
    },
    props: ['tableData', 'columns'],
    name: "GridView_Element",
    mounted() {

      //tr: class  : el-table__row
      //滚动的容器 id scrollContent
      //class :el-table__body tbody

      setTimeout(()=>{
        let clusterize = new Clusterize({
          rows: document.querySelectorAll('.el-table__row'),
          scrollElem: document.querySelector('#scrollContent'),
          contentElem:document.querySelector('.el-table__body tbody')
        });
      },1000)
    }
  }
</script>

<style scoped>
#scrollContent {
  height: 450px;
  overflow-y: auto;
}
</style>
